<template>
  <div class="role-detail-root">
    <el-dialog
        title="系统角色详情"
        :visible.sync="dialogVisible"
        width="30%"
        :close="close"
        :before-close="close">

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="角色ID">
          <el-input v-model="form.roleId" style="width: 65%" readonly></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input v-model="form.roleName" style="width: 65%" readonly></el-input>
        </el-form-item>
        <el-form-item label="角色类型">
          <el-select v-model="form.type" placeholder="请选择" disabled>
            <el-option v-for="item in roleTypes" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="close">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "RoleDetail",
  props: ["roleDto", "roleTypes"],
  data() {
    return {
      dialogVisible: true,
      form: {},
    }
  },
  mounted() {
    this.form = this.roleDto;
  },
  methods: {
    close() {
      this.$emit("close");
    },
  }
}
</script>

<style scoped>

</style>
